<template>
  <div>
    <el-table-column :show-overflow-tooltip="true" label="PI可视化" prop="piItemView">
      <template slot-scope="scope">
        <div v-if="scope.row.piItemTypeCode">
          <el-tooltip v-if="getActiveMsg(scope.row.itemInfo)" :content="getActiveMsg(scope.row.itemInfo)" effect="dark" placement="top-start">
            <i class="el-icon-document" style="font-size:18px" />
          </el-tooltip>
          <el-tooltip v-if="getUntieLinkMsg(scope.row.itemInfo)" :content="getUntieLinkMsg(scope.row.itemInfo)" effect="dark" placement="top-start">
            <i class="el-icon-document" style="font-size:18px" />
          </el-tooltip>
          <el-tooltip v-if="getTraitMsg(scope.row.itemInfo)" :content="getTraitMsg(scope.row.itemInfo)" effect="dark" placement="top-start">
            <i class="el-icon-document" style="font-size:18px" />
          </el-tooltip>
        </div>
      </template>
    </el-table-column>
  </div>
</template>
<script>
export default {
  methods: {
    getActiveMsg(itemInfo) {
      const itemObj = JSON.parse(itemInfo)
      if (itemObj.piActiveItem) {
        const itemNbrs = []
        itemObj.piActiveItem.forEach(element => {
          itemNbrs.push(element.itemNbr)
        })
        return '商品激活：' + itemNbrs.join(',')
      }
    },
    getUntieLinkMsg(itemInfo) {
      const itemObj = JSON.parse(itemInfo)
      if (itemObj.piUntieLinkList) {
        const itemNbrs = []
        itemObj.piUntieLinkList.forEach(element => {
          itemNbrs.push('主商品：' + element.mainItemNbr + '|次商品：' + element.secondItemNbr)
        })
        return '解交叉：' + itemNbrs.join(',')
      }
    },
    getTraitMsg(itemInfo) {
      const itemObj = JSON.parse(itemInfo)
      if (itemObj.piTraitList) {
        const itemNbrs = []
        itemObj.piTraitList.forEach(element => {
          itemNbrs.push(element.itemNbr)
        })
        return '改Trait：' + itemNbrs.join(',')
      }
    }
  }
}
</script>

